<template>
  <div id="invBatchSearch">
    <Breadcrumb content="批次查询" />
    <div class="bodyContent">
      <Splitpanes @resize="panelResize">
        <!-- 左侧表格  -->
        <Pane size="65">
          <vxe-toolbar>
            <template #buttons>
              <span class="margin-lr-sm text-bold text-shadow text-df">当前库存:检验科总仓库</span>
              <span class="margin-lr-sm text-bold">批次:</span>
              <vxe-input v-model="form.batch" placeholder="请输入批次" clearable @keydown="searchKeyDown" />
              <vxe-button type="text" class="button-blue margin-lr-sm" class-name="margin-lr-sm" @click="findList">查询</vxe-button>
              <vxe-button type="text" class="button-blue" class-name="margin-lr-sm" @click="getRemoveEvent">导出</vxe-button>
            </template>
          </vxe-toolbar>
          <div class="tableBody">
            <vxe-table ref="transferTypeTableRef" class="mytable-scrollbar transferTypeTableClazz" border="inner" align="left" height="auto" :data="tableData" :loading="loading" @current-change="RowClick" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" :row-style="rowStyle" resizable show-overflow keep-source>
              <vxe-column type="seq" width="30"></vxe-column>
              <vxe-column field="batchNum" title="批次" width="100">
                <template #default="{ row }">
                  <span>{{ row.batchNum }}</span>
                </template>
              </vxe-column>
              <vxe-column field="reaNo" title="商品编号" width="120">
                <template #default="{ row }">
                  <span>{{ row.reaNo }}</span>
                </template>
              </vxe-column>
              <vxe-column field="reaNa" title="商品名称" min-width="120">
                <template #default="{ row }">
                  <span>{{ row.reaNa }}</span>
                </template>
              </vxe-column>
              <vxe-column field="manufacturerName" title="生产厂家" width="120">
                <template #default="{ row }">
                  <span>{{ row.manufacturerName }}</span>
                </template>
              </vxe-column>
              <vxe-column field="produceDate" title="生产日期" width="100">
                <template #default="{ row }">
                  <span>{{ row.produceDate }}</span>
                </template>
              </vxe-column>
              <vxe-column field="expiryDate" title="失效日期" width="100">
                <template #default="{ row }">
                  <span>{{ row.expiryDate }}</span>
                </template>
              </vxe-column>
              <vxe-column field="quantity" title="库存数量" width="60" align="right">
                <template #default="{ row }">
                  <span>{{ row.quantity }}</span>
                </template></vxe-column>
              <vxe-column field="unit" title="单位" width="65" align="center">
                <template #default="{ row }">
                  <span>{{ row.unit }}</span>
                </template></vxe-column>
            </vxe-table>
          </div>
        </Pane>
        <!-- 右侧表单 -->
        <Pane size="35">
          <Splitpanes horizontal @resize="panelResize">
            <Pane size="35">
              <div id="MaintainChart" class="chart" style="height: 100%; width: 100%;overflow:auto"></div>
            </Pane>
            <Pane size="65">
              <el-scrollbar>
                <div class="margin-top-sm padding-right-sm pointer">
                  <el-timeline style="max-width: 600px">
                    <el-timeline-item center :timestamp="item.dateStr" placement="top" v-for="(item,index) in stepList" :key="index">
                      <el-card>
                        <h4>【{{`${item.label}`}}】{{`${item.reagentNa}`}}</h4>
                        <p>{{`${item.actorNa}`}} {{`${item.actorDt}`}}</p>
                      </el-card>
                    </el-timeline-item>
                    <!-- <el-timeline-item timestamp="2018/4/3" placement="top">
                      <el-card>
                        <h4>【入库验收】7180质控品1</h4>
                        <p>张三 2018/4/3 20:46</p>
                      </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="2018/4/3" placement="top">
                      <el-card>
                        <h4>【财务验收】7180质控品1</h4>
                        <p>张三 2018/4/3 20:46</p>
                      </el-card>
                    </el-timeline-item>
                    <el-timeline-item center timestamp="2018/4/2" placement="top">
                      <el-card>
                        <h4>【调拨】7180质控品1</h4>
                        <p>张三 2018/4/3 20:46</p>
                      </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="2018/4/2" placement="top">
                      <el-card>
                        <h4>【调拨验收】7180质控品1</h4>
                        <p>张三 2018/4/3 20:46</p>
                      </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="2018/4/2" placement="top">
                      <el-card>
                        <h4>【出库】7180质控品1</h4>
                        <p>张三 2018/4/3 20:46</p>
                      </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="2018/4/2" placement="top">
                      <el-card>
                        <h4>【出库验收】7180质控品1</h4>
                        <p>张三 2018/4/3 20:46</p>
                      </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="2018/4/2" placement="top">
                      <el-card>
                        <h4>【使用登记】7180质控品1</h4>
                        <p>张三 2018/4/3 20:46</p>
                      </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="2018/4/2" placement="top">
                      <el-card>
                        <h4>【开盒登记】7180质控品1</h4>
                        <p>张三 2018/4/3 20:46</p>
                      </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="2018/4/2" placement="top">
                      <el-card>
                        <h4>【空盒登记】7180质控品1</h4>
                        <p>张三 2018/4/3 20:46</p>
                      </el-card>
                    </el-timeline-item> -->
                  </el-timeline>
                </div>
              </el-scrollbar>
            </Pane>
          </Splitpanes>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, getCurrentInstance } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { VXETable } from 'vxe-table';
import type { VxeTableInstance, VxeTablePropTypes, VxeTableEvents } from 'vxe-table';
import XEClipboard from 'xe-clipboard';
import VxePulldownSelection from '@/components/VxePulldownSelection.vue';
import { Splitpanes, Pane } from 'splitpanes';
import * as echarts from 'echarts';
import { IsEmpty } from '@/utils/common';

const tableRef = ref<VxeTableInstance<RowVO>>();
let { proxy }: any = getCurrentInstance();
const loading = ref(false);
const tableData = reactive([]);
let stepList = reactive([]);/**步骤集合 */
const menuConfig = reactive<VxeTablePropTypes.MenuConfig<RowVO>>({
  header: {
    options: [
      [
        { code: 'hideColumn', name: '隐藏列', disabled: false },
        { code: 'showAllColumn', name: '取消所有隐藏列', disabled: false }
      ]
    ]
  },
  body: {
    options: [
      [
        { code: 'copy', name: '复制', prefixIcon: 'vxe-icon-copy', disabled: false },
        { code: 'reload', name: '刷新', disabled: false },
        { code: 'insertAt', name: '插入', disabled: false },
        { code: 'remove', name: '删除', disabled: false },
        { code: 'save', name: '保存', prefixIcon: 'vxe-icon-save', disabled: false }
      ]
    ]
  },
  visibleMethod({ options, column }) {
    const isDisabled = !column;
    options.forEach((list) => {
      list.forEach((item) => {
        item.disabled = isDisabled;
      });
    });
    return true;
  }
});
let chartData = reactive({});/**chart 数据 */
const sexList = ref([
  { label: '', value: '' },
  { label: '男', value: '1' },
  { label: '女', value: '0' }
]);

let form = reactive({
  batch: ''
});

const formatSex = (row: RowVO) => {
  if (row.sex === '1') {
    return '男';
  }
  if (row.sex === '0') {
    return '女';
  }
  return '';
};

let myChart5 = ref(null);/**图标对象 */

let personalAgency2: any = ref({});
const transferTypeTableRef = ref(null);/**表格对象 */

onMounted(() => {
  findList();
  //initDeviceFix();
  loadChartData();
});

function findList() {
  loading.value = true;
  tableData.length = 0;
  const url = '/inv/invReagentStock/findReagentStockByBatch';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        batch: form.batch,
      }
    })
    .then((res: any) => {
      tableData.length = 0;
      Object.assign(tableData, res.data);
      loading.value = false;
    })
    .catch((err: any) => {
      loading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
};

const contextMenuClickEvent: VxeTableEvents.MenuClick<RowVO> = ({ menu, row, column }) => {
  const $table = tableRef.value;
  if ($table) {
    switch (menu.code) {
      case 'hideColumn':
        $table.hideColumn(column);
        break;
      case 'showAllColumn':
        $table.resetColumn(true);
        break;
      case 'copy':
        if (XEClipboard.copy((row as any)[column.field])) {
          VXETable.modal.message({ content: '已复制到剪贴板！', status: 'success' });
        }
        break;
      case 'reload':
        findList();
        break;
      case 'insertAt':
        $table.insertAt({}, row || -1).then(({ row }) => {
          $table.setEditCell(row, column || 'name');
        });
        break;
      case 'remove':
        $table.remove(row);
        break;
      case 'save':
        VXETable.modal.message({ content: '保存成功', status: 'success' });
        findList();
        break;
    }
  }
};

const getRemoveEvent = () => {
  const $table = tableRef.value;
  if ($table) {
    const removeRecords = $table.getRemoveRecords();
    VXETable.modal.alert(removeRecords.length);
  }
};

const getUpdateEvent = () => {
  const $table = tableRef.value;
  if ($table) {
    const updateRecords = $table.getUpdateRecords();
    VXETable.modal.alert(updateRecords.length);
  }
};
let dataMap = {};
function dataFormatter(obj) {
  // prettier-ignore
  var pList = ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '重庆', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆'];
  var temp;
  for (var year = 2002; year <= 2011; year++) {
    var max = 0;
    var sum = 0;
    temp = obj[year];
    for (var i = 0, l = temp.length; i < l; i++) {
      max = Math.max(max, temp[i]);
      sum += temp[i];
      obj[year][i] = {
        name: pList[i],
        value: temp[i]
      };
    }
    obj[year + 'max'] = Math.floor(max / 100) * 100;
    obj[year + 'sum'] = sum;
  }
  return obj;
}
// 设备维修
function initDeviceFix(obj) {
  const posList = [
    'left',
    'right',
    'top',
    'bottom',
    'inside',
    'insideTop',
    'insideLeft',
    'insideRight',
    'insideBottom',
    'insideTopLeft',
    'insideTopRight',
    'insideBottomLeft',
    'insideBottomRight'
  ];
  app.configParameters = {
    rotate: {
      min: -90,
      max: 90
    },
    align: {
      options: {
        left: 'left',
        center: 'center',
        right: 'right'
      }
    },
    verticalAlign: {
      options: {
        top: 'top',
        middle: 'middle',
        bottom: 'bottom'
      }
    },
    position: {
      options: posList.reduce(function (map, pos) {
        map[pos] = pos;
        return map;
      }, {})
    },
    distance: {
      min: 0,
      max: 100
    }
  };
  app.config = {
    rotate: 90,
    align: 'left',
    verticalAlign: 'middle',
    position: 'insideBottom',
    distance: 15,
    onChange: function () {
      const labelOption = {
        rotate: app.config.rotate,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        position: app.config.position,
        distance: app.config.distance
      };
      myChart.setOption({
        series: [
          {
            label: labelOption
          },
          {
            label: labelOption
          },
          {
            label: labelOption
          },
          {
            label: labelOption
          }
        ]
      });
    }
  };
  const labelOption = {
    show: true,
    position: app.config.position,
    distance: app.config.distance,
    align: app.config.align,
    verticalAlign: app.config.verticalAlign,
    rotate: app.config.rotate,
    formatter: '{c}  {name|{a}}',
    fontSize: 16,
    rich: {
      name: {}
    }
  };
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['Forest', 'Steppe', 'Desert', 'Wetland']
    },
    toolbox: {
      show: false,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar', 'stack'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    xAxis: [
      {
        type: 'category',
        axisTick: { show: false },
        data: obj.reaNas//['脂蛋白', '7180质控品1', '白蛋白', '尿素氮', '总胆固醇']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '高储',
        type: 'bar',
        barGap: 0,
        label: labelOption,
        emphasis: {
          focus: 'series'
        },
        data: obj.maxStock//[320, 332, 301, 334, 390]
      },
      {
        name: '现存',
        type: 'bar',
        label: labelOption,
        emphasis: {
          focus: 'series'
        },
        data: obj.curStock//[220, 182, 191, 234, 290]
      },
      {
        name: '低储',
        type: 'bar',
        label: labelOption,
        emphasis: {
          focus: 'series'
        },
        data: obj.minStock//[10, 10, 10, 10, 10]
      }
    ]
  };
  if (echarts.getInstanceByDom(document.getElementById('MaintainChart') as HTMLElement)) {
    echarts.dispose(document.getElementById('MaintainChart') as HTMLElement);
  }
  const myChart5 = echarts.init(document.getElementById('MaintainChart') as HTMLElement);
  myChart5.setOption(option);
  window.addEventListener('resize', () => {
    myChart5.resize();
  });
}

/**Splitpanes 大小改变 */
function panelResize() {
  //todo
}

/**行点击事件 */
function RowClick() {
  const row = transferTypeTableRef.value?.getCurrentRecord();
  if (!row || IsEmpty(row.id)) {
    VxeMessage('请先选中一条记录', VxeNotifyType.warning);
    return;
  }
  getReagentSteps(row);
}

/**查询商品节点信息 */
function getReagentSteps(row) {
  stepList.length = 0;
  const url = '/inv/orderInfo/getReagentSteps';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        batch: row.batchNum,
        reaNo: row.reaNo,
        reaNa: row.reaNa
      }
    })
    .then((res: any) => {
      if (res && res.status && res.status.code === 1 && res.data && res.data.length > 0) {
        stepList.length = 0;
        Object.assign(stepList, res.data);
        transferTypeTableRef.value?.setCurrentRow(stepList[0]);
      }
    })
    .catch((err: any) => {
      //todo
    });
}
/**加载图标 */
function loadChartData() {
  //stepList.length = 0;
  const url = '/inv/orderInfo/getBatchSearchChart';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        batch: form.batch,
      }
    })
    .then((res: any) => {
      if (res && res.status && res.status.code === 1 && res.data) {
        //stepList.length = 0;
        Object.assign(chartData, res.data);
        initDeviceFix(chartData);
      }
    })
    .catch((err: any) => {
      //todo
    });
}
/**行样式 */
function rowStyle() {
  //todo
}
/**搜索框按下事件 */
function searchKeyDown({ value, $event }) {
  if ($event.keyCode === 13) {
    findList();
  }
}
</script>
<style lang="scss" scoped>
#invBatchSearch {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
    .splitpanes {
      background-color: $base-white;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
      .tableBody {
        height: calc(100% - 32px);
      }
      .el-tabs {
        height: 100%;
        :deep(.el-tabs__content) {
          height: calc(100% - 40px);
          padding: 0;
          .el-tab-pane {
            height: 100%;
          }
          #pane-first {
            padding: 15px;
          }
        }
      }
    }
  }
}

.container7 {
  background-color: $base-white;

  .title {
    padding-left: 20px;
    height: 50px;

    h3 {
      font-size: 19px;
      vertical-align: middle;
      color: #000;
    }
  }

  .DeviceRepair {
    .staContains {
      display: inline-block;
      width: 33%;
      text-align: center;

      span {
        display: block;
        text-align: center;
      }

      .Num {
        font-size: 25px;
        font-weight: 500;
        color: #222222;
      }

      .Description {
        font-size: 14px;
        color: #858b96;
      }
    }
  }
}

.container9 {
  background-color: $base-white;

  .title {
    padding-left: 20px;
    height: 50px;

    h3 {
      font-size: 19px;
      vertical-align: middle;
      color: #000;
      display: inline-block;
    }

    .titleUnit {
      font-size: 14px;
      color: #666666;
      margin-left: 20px;
    }
  }

  .DeviceRepair {
    margin-top: 20px;

    .staContains {
      display: inline-block;
      width: 33%;
      text-align: center;

      span {
        display: block;
        text-align: center;
      }

      .Num {
        font-size: 25px;
        font-weight: 500;
        color: #222222;
      }

      .Description {
        font-size: 14px;
        color: #858b96;
      }
    }
  }
}
.pointer {
  cursor: pointer;
}
</style>